<template>
    <div class="app-container-echart">
        <div class="chart" ref="charts" style="height:300px;width:100%;" />
    </div>
</template>

<script>

import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from '@/views/dashboard/components/mixins/resize'

export default {
    mixins: [resize],
    name: "question",
    data() {
        return {
            chart: null
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                // this.initChart();
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    methods:{
        initChart() {
            this.chart = echarts.init(this.$refs['charts'], 'macarons');
            var times = ['2022-06','2022-07','2022-08','2022-09','2022-10','2022-11', '2022-12','2023-01'];
            var data1s = [731, 1211, 1107, 1321, 892, 936, 1123, 1321];
            var data2s = [94.1,78.8,97.2,64,21,100,97.2,64];
            this.setOptions(times, data1s, data2s)
        },
        getGradientColor(color11, color22){
            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {offset: 0, color: color11},
                {offset: 1, color: color22}]) ;
        },
        submitForm() {
            alert(this.value2);
        },
        cancel() {
            this.value2 = '';
        },
        setOptions(times, barData, lineData) {
            var barWidth = 30;
            var maxVal = Number(Math.max(...barData));
            var minVal = Number(Math.min(...barData));
            this.chart.setOption({
                title: {
                    text: '考试统计',
                    left:'center'
                },
                tooltip: {
                    trigger: "axis"
                },
                grid: {
                    left: "5",
                    right: "10",
                    top: "15%",
                    bottom: "2%",
                    containLabel: true,
                },
                legend: {
                    data: ['参考人数', '通过率'],
                    right: '10%'
                },
                xAxis: {
                    name: '',
                    data: times,
                    axisPointer: {
                        type: 'shadow'
                    },
                    nameTextStyle: {
                        color: '#2683CB',
                        fontSize: '14',
                        fontWeight: '400',
                        padding: [20, 0, 0, 0]
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1F8BC6',
                            width: 1,
                            opacity: 0.3
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#2683CB',
                            fontSize: '14',
                            fontWeight: '400',
                        },
                    },
                },
                yAxis: [
                    {
                        name: '',
                        max: maxVal,
                        interval: maxVal/5,
                        axisLine: {
                            show: false
                        },
                        nameTextStyle: {
                            color: '#2583CB',
                            fontSize: '14',
                            fontWeight: '400',
                            padding: [0, 0, 0, 0]
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#1F8BC6',
                                width: 1,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#2683CB',
                                fontSize: '14',
                                fontWeight: '400',
                            },
                        }
                    },
                    {
                        name: '',
                        interval: 20,
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#2683CB',
                                fontSize: '14',
                                fontWeight: '400',
                            },
                            formatter: '{value} %'
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#1F8BC6',
                                width: 1,
                                opacity: 0.3
                            }
                        },
                    }
                ],
                series: [
                    {
                        z: 1,
                        name: '参考人数',
                        type: "bar",
                        barWidth: barWidth,
                        barGap: "0%",
                        data: barData,
                        itemStyle: {
                            normal: {
                                color: this.getGradientColor('#4EBDE3', '#3E82DF'),
                            },
                        },
                    },
                    {
                        z: 2,
                        name: '参考人数',
                        type: "pictorialBar",
                        data: barData,
                        tooltip: { show: false },
                        symbol: "diamond",
                        symbolOffset: ["0%", "50%"],
                        symbolSize: [barWidth, 10],
                        itemStyle: {
                            normal: {
                                color: '#4EBDE3',
                            },
                        },
                    },
                    {
                        z: 3,
                        name: '参考人数',
                        type: "pictorialBar",
                        symbolPosition: "end",
                        data: barData,
                        tooltip: { show: false },
                        symbol: "diamond",
                        symbolOffset: ["0%", "-60%"],
                        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                        itemStyle: {
                            normal: {
                                borderColor: '#4AA8E3',
                                borderWidth: 2,
                                color: '#4AA8E3',
                            },
                        },
                    },
                    {
                        name: '通过率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: lineData,
                        tooltip: {
                            valueFormatter: function (value) {
                            return value + ' °C';
                            }
                        },
                    }
                ]
            })
        }
    }
}

</script>
